<!-- <template>
  <div> -->
    <!-- 问答 -->
    <!-- <van-nav-bar
      :fixed="true"
      title="问答"
      left-arrow
      @click-left="back"
    /> -->
    <!-- 给空盒子 -->
    <!-- <div class="fix" /> -->
    <!-- 设置大盒子进行flex排列并给底部灰色横线 -->
    <!-- <div
      v-for="(item, i) in data"
      :key="i"
      class="box"
    > -->
      <!-- 文字溢出隐藏 -->
      <!-- <div class="characters">
        {{ item.title }}
        <br> -->
        <!-- 文字大小间距 -->
        <!-- <div class="typeface"> -->
          <!-- 设置间距 -->
          <!-- <span class="spacing"> -->
            <!-- 赞同 {{ item.likeCount > 999 ? 999 + '+' : item.likeCount }}
          </span> -->
          <!-- 设置间距 -->
          <!-- <span class="spacing">
            评论 {{ item.commentCount > 999 ? 999 + '+' : item.commentCount }}
          </span> -->
          <!-- 给函数引时间 -->
          <!-- {{ getTime(item.pubTimestamp) }} -->
        <!-- </div>
      </div>
      <div> -->
        <!-- 设置背景图片 -->
        <!-- <img
          :src="item.thumbSrc"
          class="background"
        >
      </div>
    </div>
  </div>
</template> -->

<!-- <script> -->
// import moment from 'moment';
// export default {
//   name: 'QaPage',
//   data() {
//     return {
//       data: new Array(100)
//         .fill(0)
//         .map(() => ({
//           // 标题
//           title: '作为IT行业的过来人，你有什么话相对后辈说的？？？？？？？？？',
          // 点赞数 超过999显示为999+
          // likeCount: 1234,
          // // 评论数 超过999显示为999+
          // commentCount: 555,
          // // 发布时间
          // pubTimestamp: 1658482134742,
          // 缩略图
  //         thumbSrc: 'https://pic1.zhimg.com/80/v2-8e77b2771314f674cccba5581560d333_xl.jpg?source=4e949a73',
  //       })),
  //   };
  // },
  // methods: {
  //   back() {
      // 回到上一页/层
//       this.$router.go(-1);
//     },
//     getTime(timeStick) {
//       return moment(timeStick).fromNow()
//     }
//   },
// }
<!-- // </script> -->

<!-- <style >
.box {
  display: flex;
  flex-direction: row;
  padding-bottom: 20px;
  margin: 20px;
  border-bottom: 1px #eee solid;
}

.background {
  flex: 1;
  display: block;
  width: 100px;
  height: 80px;
  border-radius: 6px;
}

.characters {
  width: 100%;
  flex: 1;
  overflow: hidden;
  -webkit-line-clamp: 2;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  word-break: break-all;
}

.fix {
  height: 45px;
  width: 100%;
}

.typeface {
  padding-top: 10px;
  color: #999;
  font-size: 14px;
}

.spacing {
  padding-right: 15px;
}
</style> -->


<!-- 答案 -->
<template>
  <div>
    <van-nav-bar title="问答">
      <template #left>
        <van-icon
          name="arrow-left"
          color="#999"
        />
      </template>
    </van-nav-bar>
    <div class="container">
      <van-cell-group>
        <van-cell
          v-for="(d, i) in data"
          class="cell"
          :key="i"
          :title="d.title"
          size="large"
        >
          <template #label>
            <span>赞同 {{ getCount(d.likeCount) }}</span>
            <span>评论 {{ getCount(d.commentCount) }}</span>
            <span>{{ getTime(d.pubTimestamp) }}</span>
          </template>
          <img :src="d.thumbSrc">
        </van-cell>
      </van-cell-group>
    </div>
  </div>
</template>

<script>
import moment from 'moment';

export default {
  name: 'QaPage',
  data() {
    return {
      data: new Array(100)
        .fill(0)
        .map(() => ({
          // 标题
          // title: '作为IT行业的过来人，你有什么话相对后辈说的？？？？？？？？？',
          title: '作为IT行业的过来人，你有什么话想对后辈说的aaaaaaaaaaaaaaaaaaaaaaa',
          // 点赞数 超过999显示为999+
          likeCount: 1234,
          // 评论数 超过999显示为999+
          commentCount: 555,
          // 发布时间
          pubTimestamp: 1658482134742,
          // 缩略图
          thumbSrc: 'https://pic1.zhimg.com/80/v2-8e77b2771314f674cccba5581560d333_xl.jpg?source=4e949a73',
        })),
    };
  },
  methods: {

    getCount(num) {
      return num > 999 ? '999+' : num;
    },
    getTime(timestamp) {
      return moment(timestamp).fromNow();
    },
  },
}
</script>


<style lang="less" scoped>
.van-cell__value {
  overflow: visible;
  flex: none;
}

.van-cell__title {
  position: relative;

  >span {
    width: 100%;
    overflow: hidden;
    -webkit-line-clamp: 2;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    word-break: break-all;
    line-break: anywhere;
  }

  .van-cell__label {
    position: absolute;
    bottom: 0;
    width: 100%;

    span {
      margin-right: 12px;
    }
  }
}

.container {
  height: calc(100% - 46px);
  overflow: auto;

  .cell {
    padding-top: 16px;
    padding-bottom: 16px;

    img {
      width: 124px;
      height: 82px;
      border-radius: 4px;
    }
  }
}
</style>
